<script setup lang="ts">
import { onMounted, watch } from "vue";
import { runCodeWithBlob } from "../utils/CodeRunner";

const props = defineProps<{
  code: string;
  runCode: number;
}>();

watch(
  () => props.runCode,
  () => {
    if (props.runCode) {
      const container = document.getElementById("container");
      if (container) {
        container.innerHTML = "";
      }
      handleRun();
    }
  }
);
const handleRun = () => {
  runCodeWithBlob(props.code);
};

onMounted(() => {
  handleRun();
});
</script>

<template>
  <div id="container" style="width: 100%; height: 100%"></div>
</template>
